<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>viewpager</title>
    <style>
         #out_view *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        #out_view{
            position: relative;
        }
        #out_view ul>li{
            float: left;
        }
        #out_view{
            width: 400px;
            height: 200px;
            margin: 0 auto;
            overflow: hidden;
         }
        #my_views{
            position: absolute;
            width: 400px;
            border: 1px solid #f70505;
        }
        #out_view ul:after{
            content: '';
            display: block;
            clear: both;
        }
        #out_view ul.img_list{
            width: 2000px;
            position: absolute;
        }

        #out_view ul.img_list>li{
            width: 400px;
            height: 200px;
        }
        #out_view ul.img_list>li img{
            width: 100%;
            height: 100%;
        }
        #out_view ul.number_list{
            position: absolute;
            bottom: 20px;
            right: 20px;
        }
        #out_view ul.number_list>li{
            width: 20px;
            height: 20px;
            background-color: #fff;
            font-weight: bold;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
            margin: 0 2px;
        }
        #out_view ul.number_list>li.active{
            background-color: #985f0d;
        }
        #out_view .prev,#out_view .next{
            position: absolute;
            width: 30px;
            height: 40px;
            font-weight: bold;
            font-size: 18px;
            background-color: #c4e3f3;
            text-align: center;
            line-height: 40px;
            opacity: 0.6;
            cursor: pointer;
            border-radius: 8px;
        }
        #out_view .prev{
            left: 10px;
            top:80px;
        }
        #out_view .next{
            right: 10px;
            top:80px;
        }
        #out_view>span:hover{
            opacity: 0.9;
            background-color: #2aabd2;
        }
    </style>

    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
     <link href="/static/css/main.css" rel="stylesheet">

</head>
<body>
<!--导航-->
{% include "../base/header.html" %}

  <div class="container-fluid">
    <div class="row">
        <!--菜单-->
      {% include "../base/menu.html" %}

      <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h2 class="sub-header">例子：轮播</h2>
          <div id="out_view">

            <ul class="img_list">

                </ul>
              <!------------------------------------>
            <ul class="number_list">

            </ul>
            <span class="prev">&lt </span>
            <span class="next">&gt</span>
          </div>


      </div>
    </div>
  </div>



<script src="/static/js/jquery-1.12.4.js"></script>
<script>
$(function () {
    //存放图片的数组
    var imgs_list = [
        '/static/images/viewpager/1.jpg',
        '/static/images/viewpager/2.jpg',
        '/static/images/viewpager/3.jpg',
        '/static/images/viewpager/4.jpg',
        '/static/images/viewpager/5.jpg',
    ]
    var out_view =$('#out_view') //外层容器
    var out_width = $('#out_view').width() //外层容器的宽度
    var img_ul = $('#out_view .img_list') //图片列表ul
    var number_ul = $('#out_view .number_list') //数字列表ul
    var prev_btn = $('#out_view .prev') //左边的按钮
    var next_btn = $('#out_view .next') //右边的按钮
    var current = 1 //当前活动的图片/数字
    var click_lock = true //点击锁
    var timd_id //定时器id
    //渲染轮播的页面的函数
    function updateView(imgs_list,img_ul,number_ul,current) {
        /**
         * imgs_list:图片路径数组
         * img_ul:存放图片的ul
         * number_ul:存放数字的ul
         * current: 当前显示的图片
         * **/
        var current = current?current:1 //当前显示的页码默认为1
        var imgs_list = imgs_list
        var img_list_html = ''
        var number_list_html = ''
        for (var i=0;i<imgs_list.length;i++){
            img_list_html += `<li><img src="${imgs_list[i]}"></li>`
            number_list_html += `<li data-item=${i+1} class="${(current==i+1)? 'active' :''}">${i+1}</li>`
        }
        img_ul.html(img_list_html) //生成图片列表
        number_ul.html(number_list_html) //生成数字列表
    }
    //右边边按钮事件
    function next_event(move_number){
        if (!click_lock ) return  //点击锁为false则不处理
        click_lock = false //设置点击锁为false
        var move_number = move_number?move_number:1  //用来确定图片和数字移动的个数默认为1
        current += 1 //当前显示图片和数字+1
        current = current>(imgs_list.length)?1:current //如果当前显示图片和数字大于最大值
        //1.把图片列表向左移动(图片个数*宽度)px,
        img_ul.animate({"left":`-${out_width*move_number}px`},"slow",function () {
            //2.然后将向左移动出去的图片剪切到图片列表的结尾,把left 改为0px
            var next_del_img= imgs_list.splice(0,1*move_number)
            for (var i=0;i<next_del_img.length;i++){
                imgs_list.push(next_del_img[i])
            }
            img_ul.css({'left':'0px'})
            updateView(imgs_list,img_ul,number_ul,current)//3.最后重新生成页面,
            click_lock = true //4.把点击锁设置为true
        })

    }
    //左边边按钮事件
    function prev_event(move_number){
        if (!click_lock ) return //点击锁为false则不处理
        click_lock = false //设置点击锁为false
        var move_number = move_number?move_number:1 //用来确定图片和数字移动的个数默认为1
        current -= 1 //当前显示图片和数字+1
        current = current<1?imgs_list.length:current //如果当前显示图片和数字小于1就改为最大值
        //1. 将图片列表的后面move_number 个图片删除,拼接到前面
        var prev_del_img= imgs_list.splice(-1*move_number,1*move_number)
        for (var i=prev_del_img.length-1;i>-1;i--){
                imgs_list.unshift(prev_del_img[i])
            }
        //2.设置图片列表的left值
        img_ul.css({"left":`-${out_width*move_number}px`})
        //3.根据拼接好的列表重新生成页面
        updateView(imgs_list,img_ul,number_ul,current)
        //4.启动向右滑动的动画,然后设置 click_lock = true
        img_ul.animate({"left":"0px"},1000,function () {
            click_lock = true
        })

    }
    //数字列表的鼠标进入事件
    number_ul.on("mouseover","li",function () {
        clearInterval(timd_id)
        if (!click_lock ) return //点击锁为false则不处理
        var current_number = $(this).attr('data-item')//获取当前数字
        var old_number = $(this).parent().children('.active').attr('data-item') //获取旧的数字
        move_number =  parseInt(current_number) - parseInt(old_number) //获取前后的差值
        if(parseInt(current_number) > parseInt(old_number)){ //根据当前和之前的值大小判断向左还是向右滑动
            current = parseInt(current_number) - 1  //因为next_event函数中current有-1,所以这里+1,,不然后面重新生成页面的时候数字不对
            next_event(move_number)
        }else if(parseInt(current_number) < parseInt(old_number)){//根据当前和之前的值大小判断向左还是向右滑动
            current = parseInt(current_number) + 1
            move_number = Math.abs(move_number)
            console.log(current,move_number)
            prev_event(move_number)
        }else {
            return
        }
    })
    updateView(imgs_list,img_ul,number_ul) //加载完成生成页面
    prev_btn.on('click',function(){  //左边点击事件
        clearInterval(timd_id)
        prev_event()
    })
    next_btn.on('click', function(){ //右边按钮点击事件
        clearInterval(timd_id)
        next_event()
    })

    function auto(){ //自动轮播的函数
        timd_id = setInterval(function(){
            next_event()
        },2000)
    }
    auto() //启用自动轮播
    out_view.mouseenter(function(){
        clearInterval(timd_id)
    })
     out_view.mouseleave(function(){
        auto() //启用自动轮播
    })
})


</script>
</body>
</html>